<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,
		maximun-scale=1.0,minimun-scale=1.0">
		<title>fate</title>
		<link rel="shortcut icon" href="img/bitbug_favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" href="css/swiper-bundle.min.css" />
	</head>
	<body>
		<div class="top">
			<a href="#"><img src="img/gnavi_menu_close.png" alt="图片" /></a>
			<span>suzuki</span>
		</div>
		<!-- 导航栏 -->
		<div class="nav">

			<div class="container">
				<div class="row rnt">
					<div class="nav-item col-lg-2 col-md-2 col-sm-4 hidden-xs">
						<a href="#">ニュース</a>
					</div>
					<div class="nav-item hidden-lg hidden-md hidden-sm col-xs-7">
						123123
					</div>
					<div class="nav-item col-lg-3 col-md-3 col-sm-2 hidden-xs">
						<a href="#">せかい</a>
					</div>
					<div class="nav-item col-lg-2 col-md-2 hidden-sm hidden-xs">
						<a href="#">遊びに来て</a>
					</div>
					<div class="nav-item col-lg-3 col-md-3 hidden-sm hidden-xs">
						<a href="#">おんがく</a>
					</div>
					<div class="nav-item col-lg-2 col-md-2 col-sm-6 col-xs-5">
						<a href="#">ビル町</a>
					</div>
				</div>
			</div>
		</div>


		<!-- 第一个轮播图 -->
		<div class="swiper fristswiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="img/d833c895d143ad4bd113ed04b7534dafa40f4afba8ec.jfif" alt="" />
				</div>
				<div class="swiper-slide">
					<img src="img/d439b6003af33a87e9503b3bf00d07385343fbf21fcb.jfif" alt="" />
				</div>
				<div class="swiper-slide">
					<img src="img/023b5bb5c9ea15ce36d3dc2e80512df33a87e95014c1.jfif" alt="" />
				</div>
				<div class="swiper-slide">
					<img src="img/6609c93d70cf3bc79f3d89d4e751ada1cd11728bfcf0.jfif" alt="" />
				</div>
			</div>
			<!-- <div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div> -->
			<!-- <div class="swiper-pagination"></div> -->
		</div>
		<!-- 导航下面 -->
		<div class="yo">
			<span>人の一生は重荷を负うて、远き道を行くがごとし、急ぐべからず</span>
		</div>
		<!-- 第二个轮播图 -->
		<div class="middle-nav">
			<!-- Swiper -->
			<div class="swiper swiper_fo">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="sw-tu">图片放入</div>
					</div>
					<div class="swiper-slide">放图片2</div>
					<div class="swiper-slide">放图片3</div>
					<div class="swiper-slide">放图片4</div>
					<div class="swiper-slide">放图片5</div>
					<div class="swiper-slide">放图片6</div>
					<div class="swiper-slide">放图片7</div>
					<div class="swiper-slide">放图片8</div>
					<div class="swiper-slide">放图片9</div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
		</div>
		<!-- 视频展览区域 -->
		<div class="container vd">
			<div class="row">
				<div class="video-zi col-lg-6 col-md-6 col-sm-6">
					<h3>title</h3>
					<p>不自由を、常と思えば不足なし。心に望みおこらば、困穷したる时を思い出すべし</p>
					<span>图片or文字</span>
				</div>
				<div class="video-bu col-lg-6 col-md-6 col-sm-6 ">
					<video src="img/5mins.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
				</div>
			</div>
		</div>
		<!-- 视频下面的部分 -->
		<div class="vdown">
			<div class="container">
				<div class="row">
					<div class="video-zi col-lg-6 col-md-6 col-sm-6">
						<h3><strong>堪忍は、无事长久の基</strong></h3>
						<p>ニュースここに</p>
					</div>
					<div class="wz col-lg-6 col-md-6 col-sm-6">另一边放内容的盒子</div>
				</div>
			</div>
			<!-- <div class="container"> -->
			<!-- <div class="row"> --> <!-- col-xs-4 col-xs-off-4 -->
			<div class="boimg">
				<a href="#"><img src="img/cap_event.png" alt="" /></a>
			</div>
			<!-- </div> -->
			<!-- </div> -->
		</div>
		<!-- 新闻部分 -->
		<div class="container">
			<div class="row">
				<div class="new col-lg-6 col-md-6 col-sm-6">
					<span><img src="img/title_news.png" alt="" /></span>
					<span>
						<h4>いち</h4>
					</span>
					<span>
						<p> 己を责めて、人を责むるな</p>
						<p>及ばざるは、过ぎたるに胜れり</p>
						<p>正文内容内容正文内容内容正文内容内容</p>
					</span>
					<span><img src="img/btn_more.png" alt="" /></span>
				</div>
				<div class="new col-lg-6 col-md-6 col-sm-6">
					<a href="https://twitter.com/"><img src="img/title_x.png" alt="" /></a>
					<p>推文</p>
					<p>推文</p>
					<p>推文</p>
					<p>推文</p>
					<!-- <p>推文</p> -->
					<a href="https://twitter.com/"><img src="img/btn_x.png" alt="" /></a>
				</div>
			</div>
		</div>
		<!-- 新闻下面部分 -->
		<div class="feng">
			<div id="expandingCards">
				<input type="radio" name="select" id="select1" checked />
				<label for="select1"></label>
				<input type="radio" name="select" id="select2" />
				<label for="select2"></label>
				<input type="radio" name="select" id="select3" />
				<label for="select3"></label>
				<input type="radio" name="select" id="select4" />
				<label for="select4"></label>
				<input type="radio" name="select" id="select5" />
				<label for="select5"></label>
			</div>
		</div>
		<!-- 风琴图下方，轮播图视频 -->
		<div class="new">
			<img src="img/title_movie.png" alt="tupian" />
			<span>
				<h2>一下视频仅IPv6使用观看</h2>
			</span>
		</div>
		<!-- 中间加一个间隔线 -->
		<div class="xia">
			<div class="swiper spyo">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<iframe src="https://www.youtube.com/watch?v=0JXQdrjS-Ac">
						</iframe>
					</div>
					<div class="swiper-slide">
						<iframe src="https://www.youtube.com/embed/s64_FQY9-1c">
						</iframe>
					</div>
					<div class="swiper-slide"><iframe src="https://www.youtube.com/watch?v=kIV-PvjXjSY">
						</iframe></div>
					<div class="swiper-slide"><iframe src="https://www.youtube.com/embed/ih1l6wb7LhU">
						</iframe></div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
		</div>
		<!-- JS部分 -->
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="js/swiper-bundle.min.js"></script>
		<!-- 轮播图js部分 -->
		<script>
			var swiper = new Swiper(".fristswiper", {
				spaceBetween: 30,
				effect: "fade",
				loop: true,
				autoplay: true,
				// navigation: {
				// 	nextEl: ".swiper-button-next",
				// 	prevEl: ".swiper-button-prev",
				// },
				pagination: {
					el: ".swiper-pagination",
					clickable: true,
				},
			});
			// 第二个JS轮播图
			(function() {
				var swiper = new Swiper(".swiper_fo", {
					slidesPerView: 3,
					spaceBetween: 30,
					loop: true,
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev",
					},
					pagination: {
						el: ".swiper-pagination",
						clickable: true,
					},
				});
			})();
			// 第三个轮播图视频
			(function() {
				var swiper = new Swiper(".spyo", {
					slidesPerView: "auto",
					spaceBetween: 30,
					loop: true,
					pagination: {
						el: ".swiper-pagination",
						clickable: true,
					},
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev",
					}
				});
			})()
		</script>
	</body>
</html>